<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本地资源测试</title>
    <script src="/static/js/chart.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f0f0f0;
        }
        .test-container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            max-width: 600px;
            margin: 0 auto;
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
        }
        .success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        canvas {
            max-width: 100%;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>本地Chart.js资源测试</h1>
        
        <div id="status"></div>
        
        <h2>测试图表</h2>
        <canvas id="testChart"></canvas>
    </div>

    <script>
        const statusDiv = document.getElementById('status');
        
        // 检查Chart.js是否加载成功
        if (typeof Chart !== 'undefined') {
            statusDiv.innerHTML = '<div class="status success">✅ Chart.js加载成功！</div>';
            
            // 创建一个测试图表
            const ctx = document.getElementById('testChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['测试1', '测试2', '测试3'],
                    datasets: [{
                        label: '测试数据',
                        data: [12, 19, 3],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 205, 86, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 205, 86, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
            
            statusDiv.innerHTML += '<div class="status success">✅ 测试图表创建成功！</div>';
        } else {
            statusDiv.innerHTML = '<div class="status error">❌ Chart.js加载失败！</div>';
        }
    </script>
</body>
</html> 